extensions-app: Overhaul search

Instead of awkwardly filtering two different lists, use a separate
search page that filters a single list, similar to what libadwaita
does for preference windows.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3067>

diff --git a/subprojects/extensions-app/data/ui/extensions-window.ui b/subprojects/extensions-app/data/ui/extensions-window.ui
index ba8470ce3edc96ea4d7efdd0445da70590126eed..51ce6db3fe1a14a74fe6688501352ee962be58f3 100644 (file)
--- a/subprojects/extensions-app/data/ui/extensions-window.ui
+++ b/subprojects/extensions-app/data/ui/extensions-window.ui
@@ -49,6 +49,10 @@
       </object>
     </property>
   </object>
+  <object class="GtkFilterListModel" id="searchListModel">
+    <property name="model">sortModel</property>
+    <property name="filter">searchFilter</property>
+  </object>
   <template class="ExtensionsWindow" parent="AdwApplicationWindow">
     <property name="default-width">800</property>
     <property name="default-height">500</property>
@@ -219,6 +223,42 @@
                 </property>
               </object>
             </child>
+            <child>
+              <object class="GtkStackPage">
+                <property name="name">search</property>
+                <property name="child">
+                  <object class="AdwPreferencesPage">
+                    <child>
+                      <object class="AdwPreferencesGroup">
+                        <child>
+                          <object class="GtkListBox" id="searchList">
+                            <property name="selection-mode">none</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Search Results</property>
+                            </accessibility>
+                            <style>
+                              <class name="boxed-list"/>
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkStackPage">
+                <property name="name">noresults</property>
+                <property name="child">
+                  <object class="AdwStatusPage">
+                    <property name="icon-name">org.gnome.Extensions-symbolic</property>
+                    <property name="title" translatable="yes">No Results Found</property>
+                    <property name="description" translatable="yes">Try a different search.</property>
+                  </object>
+                </property>
+              </object>
+            </child>
             <child>
               <object class="GtkStackPage">
                 <property name="name">placeholder</property>

diff --git a/subprojects/extensions-app/js/extensionsWindow.js b/subprojects/extensions-app/js/extensionsWindow.js
index 03e9d8be879aa4fcac395580d47b615086226e9f..9b7a1519e0dd8c6f625e70cbbfc62792a5a66649 100644 (file)
--- a/subprojects/extensions-app/js/extensionsWindow.js
+++ b/subprojects/extensions-app/js/extensionsWindow.js
@@ -22,13 +22,14 @@ export const ExtensionsWindow = GObject.registerClass({
         'searchFilter',
         'userListModel',
         'systemListModel',
+        'searchListModel',
         'userGroup',
         'userList',
         'systemGroup',
         'systemList',
+        'searchList',
         'mainStack',
         'searchBar',
-        'searchButton',
         'searchEntry',
         'updatesBanner',
     ],
@@ -60,24 +61,14 @@ export const ExtensionsWindow = GObject.registerClass({
 
         this._searchEntry.connect('search-changed',
             () => (this._searchFilter.search = this._searchEntry.text));
+        this._searchBar.connect('notify::search-mode-enabled',
+            () => this._syncVisiblePage());
+        this._searchListModel.connect('notify::n-items',
+            () => this._syncVisiblePage());
 
-        this._userList.set_placeholder(new Gtk.Label({
-            label: _('No Matches'),
-            margin_start: 12,
-            margin_end: 12,
-            margin_top: 12,
-            margin_bottom: 12,
-        }));
         this._userList.connect('row-activated', (_list, row) => row.activate());
         this._userGroup.connect('notify::visible', () => this._syncVisiblePage());
 
-        this._systemList.set_placeholder(new Gtk.Label({
-            label: _('No Matches'),
-            margin_start: 12,
-            margin_end: 12,
-            margin_top: 12,
-            margin_bottom: 12,
-        }));
         this._systemList.connect('row-activated', (_list, row) => row.activate());
         this._systemGroup.connect('notify::visible', () => this._syncVisiblePage());
 
@@ -92,14 +83,12 @@ export const ExtensionsWindow = GObject.registerClass({
 
         this._sortModel.model = extensionManager.extensions;
 
-        this._userList.bind_model(new Gtk.FilterListModel({
-            filter: this._searchFilter,
-            model: this._userListModel,
-        }), extension => new ExtensionRow(extension));
-        this._systemList.bind_model(new Gtk.FilterListModel({
-            filter: this._searchFilter,
-            model: this._systemListModel,
-        }), extension => new ExtensionRow(extension));
+        this._userList.bind_model(this._userListModel,
+            extension => new ExtensionRow(extension));
+        this._systemList.bind_model(this._systemListModel,
+            extension => new ExtensionRow(extension));
+        this._searchList.bind_model(this._searchListModel,
+            extension => new ExtensionRow(extension));
 
         extensionManager.connect('extensions-loaded',
             () => this._extensionsLoaded());
@@ -187,9 +176,14 @@ export const ExtensionsWindow = GObject.registerClass({
 
     _syncVisiblePage() {
         const {extensionManager} = this.application;
+        const {searchModeEnabled} = this._searchBar;
 
         if (extensionManager.failed)
             this._mainStack.visible_child_name = 'noshell';
+        else if (searchModeEnabled && this._searchListModel.get_n_items() > 0)
+            this._mainStack.visible_child_name = 'search';
+        else if (searchModeEnabled)
+            this._mainStack.visible_child_name = 'noresults';
         else if (this._userGroup.visible || this._systemGroup.visible)
             this._mainStack.visible_child_name = 'main';
         else